接續把拿回來的資料做整理
拿回來的資料像這樣一大串..

插播一下，使用 chrome 可以安裝一下 Json Formatter 這個 extension

功用是可以美化 json 的格式，比較容易讀懂拿來的資料到底長什麼樣子
下載連結

實際上只會取用部分的資料就是了

setTemperatureData(objResult["hourly"]);

接下來到 TemperatureTable 顯示出從 api 取到的值
這裡要處理的有幾件事

• 從 props 取出要用的 data
• 整理 data (兩個 array)並分別 map 出對應裝該資料的表格欄位 <td>
• 對每組 <tr> 使用 uuid 來 generate unique key value
• 如果溫度高於 28 的話，給 <td> 一個 className，讓外觀顯示較高溫的樣式

TemperatureTable.js

import { v4 as uuidv4 } from "uuid";

export default function TemperatureData(props) {
  const { data } = props; // extract data from props

  function generateDataDom(d) {
    let returnDom = [];
    const timeData = d.time;
    const tempData = d.temperature_2m;
    for (let i = 0; i < timeData.length; i++) {
      returnDom.push(
        <tr key={uuidv4()}>
          <td>{timeData[i].replace("T", " ")}</td>
          {tempData[i] * 1 > 28 ? (
            <td className="hot">{tempData[i]}°C</td>
          ) : (
            <td>{tempData[i]}°C</td>
          )}
        </tr>
      );
    }
    return returnDom;
  }

  return (
    <table className="mx-auto">
      <thead>
        <tr>
          <th>Time</th>
          <th>Temperature</th>
        </tr>
      </thead>
      <tbody>{generateDataDom(data)}</tbody>
    </table>
  );
}

寫的頗糙，但功能上看起來是能動作，還請諸位大大賜教＆見笑了
今天練習的codeSandBox在這裏

參考資料

https://www.robinwieruch.de/react-hooks-fetch-data/
https://stackoverflow.com/questions/66495068/how-do-i-fetch-data-via-get-after-some-react-state-updates